<template>
  <div>
    <!-- 顶栏 -->
    <van-nav-bar title="面经登录" />
    <!-- 表单 -->
    <van-form @submit="onSubmit">
      <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 16px;">
        <van-button block type="warning" native-type="submit">登录</van-button>
      </div>
    </van-form>
    <!-- 跳转 -->
    <div class="text-right">
      <router-link to="/register">去注册</router-link>
    </div>

  </div>
</template>

<script>
import { login } from '../api/user'
import { Notify } from "vant";
export default {
  data() {
    return {
      username: 'xiaomi',
      password: '123456',
    };
  },
  methods: {
    async onSubmit() {
      const res = await login({
        username: this.username,
        password: this.password
      })
      console.log(res);
      if (res.status == 200) {
        const token = res.data.data.token
        localStorage.setItem('token', token)
        Notify({ type: "success", message: "登录成功" });
        this.$router.push('/')
      }
    },
  },
}
</script>

<style scoped>
.text-right {
  text-align: right;
  margin-right: 16px;
  font-size: 14px;

  font-weight: 700;
}

.text-right a {
  color: #006397;
}
</style>